<template>
  <div class="table">
    <a-table
      bordered
      :columns="columns"
      :data-source="data"
      class="ant-table-striped"
      :pagination="false"
      :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'tag'">
          <span v-if="record.tags.includes('Translator')" class="tag tag1">T</span>
          <span v-if="record.tags.includes('Primary')" class="tag tag2">Primary</span>
          <span v-if="record.tags.includes('TEP')" class="tag tag3">TEP</span>
          <span v-if="record.tags.includes('Editor')" class="tag tag4">E</span>
        </template>
        <template v-if="column.key === 'operate'">
          <span style="cursor: pointer; margin-right: 20px" @click="handleEdit(record)">
            <e-icon type="edit" color="#a9b5c9" font-size="16px" />
          </span>
          <a-popconfirm
            title="Are you sure delete this task?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="handleDelete(record)">
            <span style="cursor: pointer">
              <e-icon type="delete" color="#a9b5c9" font-size="16px" />
            </span>
          </a-popconfirm>
        </template>
      </template>
      <template #emptyText>
        <e-empty />
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import EEmpty from '@/components/EEmpty.vue'

const emits = defineEmits(['edit'])
const columns = reactive([
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Tag',
    dataIndex: 'tag',
    key: 'tag'
  },
  {
    title: 'Comment',
    dataIndex: 'comment',
    key: 'comment'
  },
  {
    title: 'Operate',
    dataIndex: 'operate',
    key: 'operate',
    width: '108px'
  }
])
const data = ref([
  {
    type: 1,
    name: 'Outer6208',
    nameId: '0',
    tags: ['Translator', 'TEP'],
    comment: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
  },
  {
    type: 2,
    name: 'Outer11155',
    nameId: '1',
    tags: ['Editor', 'Primary'],
    comment: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
  }
])
/**
 * 删除
 * @param record
 */
const handleDelete = record => {
  console.log(record)
}
/**
 * 编辑
 * @param record
 */
const handleEdit = record => {
  emits('edit', record)
}
</script>

<style scoped lang="less">
.table {
  width: 100%;
  margin-top: 18px;
  .tag {
    border-radius: 2px;
    padding: 2px 5px;
    font-size: 12px;
    margin-right: 6px;
  }
  .tag1 {
    color: #6c97c4;
    background-color: #eef3fe;
  }
  .tag2 {
    color: #c69874;
    background-color: #fef1ec;
  }
  .tag3 {
    color: #91b458;
    background-color: #ecffdf;
  }
  .tag4 {
    color: #69a9b7;
    background-color: #e1f8f5;
  }
  :deep(.ant-table-thead) > tr > th {
    color: @text-gray;
    background-color: @bg-color;
  }
  :deep(.ant-table-thead) > tr > td {
    color: @black-85p;
  }
  :deep(.ant-table-thead) > tr > th,
  :deep(.ant-table-tbody) > tr > td {
    font-size: 14px;
    padding: 0 12px;
    height: 48px;
  }
}
</style>
